<template>
  <div class="add">
    <!-- 去除首尾空格 -->
    <input type="text" v-model.trim="msg" />
    <button @click="collectionAdd">添加</button>
  </div>
</template>

<script>
/* 
添加数据：就在arr当中添加数据 数组添加数据 push unshift splice

add组件作用：收集到要添加的数据，然后把收集到的数据传递给app

v-model



*/
export default {
  data() {
    return {
      msg: "",
    };
  },
  methods: {
    collectionAdd() {
      // this指向当前的组件对象
      console.log(this);
      // 收集到了新的msg
      console.log(this.msg);
      // 前提 不能是空格
      if (!this.msg) {
        return;
      } else {
        //将数据传递给app,完成添加动作
        this.$emit("addItem", this.msg);
        // 将input框内容清空
        this.msg = "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.add {
  display: flex;
  justify-content: center;
}
</style>